<template>
  <div class="sale">
    <div class="title">
      <span></span>
      <span class="name">{{title}}--{{month}}月</span>
      <span class="btn" ></span>
    </div>
    <div class="sales">
      <div class="route" v-for="(items,key) in sales" :key="key">
        <div class="route-title">
          <span class="name"> {{ key }}</span>
          <span class="name"> {{sum(items)}}</span>
<!--          <span class="del">详情</span>-->
        </div>
        <div class="items">
          <div class="item" v-for="(item,index) in items" :key="index">
            <span class="name"> {{item.goodsName}}</span>
            <span class="amount"> {{item.amount}} {{item.spec}}</span>
<!--            <span class="amount"> {{item.spec}}</span>-->
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { list } from '@/api/sale'
export default {
  created () {
    this.month = this.$route.query.month
    this.headId = this.$route.query.headId
    this.headName = this.$route.query.headName
    this.shopId = this.$route.query.shopId
    this.shopName = this.$route.query.shopName
    this.level = this.$route.query.level
    this.userName = this.$route.query.userName
    this.userId = this.$route.query.userId
    this.getSales()
  },
  data () {
    return {
      sales: null,
      month: null,
      shopId: null,
      shopName: null,
      headId: null,
      headName: null,
      userId: null,
      userName: null,
      level: null
    }
  },
  computed: {
    title () {
      let srt
      if (this.headName) {
        srt = this.headName
      }
      if (this.shopName) {
        srt = this.shopName
      }
      if (this.userName) {
        srt = this.userName
      }
      return srt
    }
  },
  methods: {
    sum (items) {
      let sum = 0
      for (let i = 0; i < items.length; i++) {
        sum += items[i].amount
      }
      return sum
    },
    getSales () {
      list(this.level, this.headId, this.userId, this.shopId, null, null, this.month).then(res => {
        this.sales = res.data
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.check-box
  display flex
  align-items center
  justify-content center
  .label
    margin-right 10px
.sale
  padding 10px 10px
  .filter
    padding 0px 10px
    margin-top 20px
    color #55545D
    font-size 14px
    display flex
    align-items center
    justify-content space-between
    .ft
      color red
    .reset
      color red
  .title
    padding 0 10px
    display flex
    justify-content space-between
    align-items center
    height 60px
    color #55545D
    font-size 22px
    box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
    .btn
      color red
      font-size 14px
    &.none
      justify-content center
  .sales
    margin-top 20px
    padding-bottom 60px
    .route
      box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
      margin-bottom 20px
      .route-title
        font-size 18px
        color #55545D
        border-bottom 1px solid rgba(89, 88, 87, 0.52)
        height 40px
        display flex
        align-items center
        justify-content space-between
        padding 0 10px
        .del
          color red
      .items
        .item
          display flex
          align-items center
          justify-content space-between
          align-items center
          font-size 18px
          color #55545D
          height 40px
          padding 0 10px
          .inp
            display flex
            align-items center
            .label
              font-size 16px
              color #55545D
              margin-right 10px
  .users
    padding 0 10px
    display flex
    align-items center
    justify-content space-between
    font-size 16px
    color #55545D
    margin-top 10px
  .time-filter
    padding 0 10px
    font-size 18px
    color #55545D
    display flex
    justify-content space-between
    align-items center
    margin-top 20px

    .place
      font-size 16px
      color red
  .types
    border-top 1px solid #ECEAEA
    margin-top 20px
    padding-bottom 20px
    .desc
      display flex
      align-items center
      justify-content center
      font-size 10px
      color #989898
      padding 10px 0
    .total
      display flex
      align-items center
      justify-content space-between
      padding 0 10px
      font-size 14px
      color #55545D
    .type
      margin-bottom 10px
      display flex
      align-items center
      justify-content space-between
      padding 0 10px
      font-size 14px
      background-color #ECEAEA
      color #55545D
      .type-name
        min-width 80px
      .del
        color red
      .type-edit
        color red
      .radios
        display flex
        align-items center
        input
          margin-right 10px
        .false
          margin-left 20px
      &.done
        background-color white
      .week-date
        color #595857
  .btns
    font-size 18px
    color #55545D
    display flex
    justify-content space-between
    position fixed
    bottom 10px
    left 0
    right 0
    padding 0 10px
    .btn
      background-color white
      border 1px 1px 1px 1px solid #595857
      box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
      width 100px
      height 40px
      display flex
      justify-content center
      align-items center
  .sales
    border-top 1px solid #ECEAEA
    padding-top 20px
    .sale
      font-size 14px
      color #55545D
      display flex
      align-items center
      justify-content space-between
      padding 0 10px
      margin-bottom 10px
      &.done
        background-color #ECEAEA
</style>
